<template>
   <h1>ref()实现响应式</h1>
   <div>姓名:{{name}}</div>
   <div>
      <button @click="updateInfo">修改信息</button>
   </div>
</template>

<script>
/* 
  vue3中要现实现响应式数据，必须通过ref()函数和reactive()函数来实现
  ref()是将基本数据类型放入到响应式系统中
  使用的步骤
  1.导入ref函数:import {ref} from 'vue'
  2.使用ref函数: let name=ref("Giles")
  ref响应式的底层实现原理，依旧使用Object.defindProperty实现进行数据劫持实现的
*/
import {ref} from 'vue'
export default {
  name:'App',
  setup(){
    let name=ref("Giles")
  
    const updateInfo=()=>{
      console.log(name);
      name.value="laozhai"
    }
    return {name,updateInfo}
  }
}
</script>

<style>

</style>